<template>
  <view class="py-10">
    <scroll-view
      scroll-x
      :enable-flex="true"
      scroll-with-animation
      scroll-anchoring
      :enhanced="true"
      :show-scrollbar="false"
      class="disFlx"
      style="height: 60rpx"
    >
      <view class="disFlx px-10" style="gap: 20rpx;">
        <template v-for="v in data" :key="v.value">
          <view
            class="tag-item px-12 text-nowrap"
            :class="[modelValue === v.value && 'tag-item--active']"
            @click="onChange(v)"
          >
            <text>{{ v.label }}</text>
            <text v-if="v.num">({{ v.num }})</text>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import { type PropType } from 'vue';

  export interface TagItem {
    value: number | null;
    label: string;
    num?: number;
  }

  const props = defineProps({
    modelValue: {
      type: [Number, null] as PropType<number | null>,
    },
    data: Array as PropType<TagItem[]>,
  });

  const emit = defineEmits<{
    (e: 'change', type: TagItem): void;
    (e: 'update:modelValue', type: number | null): void;
  }>();

  function onChange(item: TagItem) {
    if (props.modelValue === item.value) return;
    emit('update:modelValue', item.value);
    emit('change', item);
  }
</script>

<style lang="scss" scoped>
  .tag-item {
    height: 56rpx;
    line-height: 56rpx;
    font-size: 24rpx;
    background-color: #f7f8fa;
    color: #999996;
    // padding: 0 24rpx;
    border-radius: 8rpx;
    border: 1px solid transparent;
    // :nth-child(1) {
    //   margin-left: 20rpx;
    // }
    // :last-child {
    //   margin-right: 20rpx;
    // }
    &--active {
      border: 1px solid #2878ff;
      background-color: #d0f7ff;
      color: #2878ff;
    }
  }
</style>
